<template>
    <div class="wrap">
        <div class="header">
            <van-search show-action shape="round" @cancel="handleCancel" @change="changeValue" @search="getList(1)" :value="searchText" :focus="focusBool" placeholder="请输入你想要搜索的商品名称"/>
        </div>
        <ul class="list">
            <li v-for="(item, index) in list" :key="index" @click="goDetail(item.productId)">
                <img :src="item.frontPicUrl" class="cover"/>
                <div class="info">
                    <div class="name van-multi-ellipsis--l2">{{item.productName}}</div>
                    <div class="number">已售{{item.sales}}</div>
                    <div class="price">
                        <span v-if="item.productType == 1">¥{{item.price}}</span>
                        <span v-else>{{item.price}}积分</span>
                        <van-icon name="shopping-cart" class="icon"/>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    data () {
        return {
            list: [],
            focusBool: true,
            searchText: '',
            pageNum: 1,
            pageSize: 10
        };
    },
    onLoad(){
         Object.assign(this.$data, this.$options.data());
    },
    onReachBottom(){
        this.getList(this.pageNum + 1);
    },
    methods: {
        getList(pageNum = this.pageNum) {
            const params = this.$getStorage('schoolInfo');
            this.$api.searchProduct({
                keyWord: this.searchText,
                pageNum,
                pageSize: this.pageSize,
                schoolId: params.schoolId
            }).then(res => {
                if (res.code == 0 && res.data.proList.length > 0) {
                    if (pageNum > 1) {
                        this.list = [...this.list,...res.data.proList];
                    } else {
                        this.list = res.data.proList;
                    }
                    this.pageNum = pageNum;
                }else {
                    this.list=res.data.proList;
                    wx.showToast({
                      title: res.msg, //提示的内容,
                      icon: 'none', //图标,
                      duration: 2000, //延迟时间,
                      mask: true, //显示透明蒙层，防止触摸穿透,
                      success: res => {}
                    });
                }
            });
        },
        changeValue(e) {
            this.searchText = e.mp.detail;
        },
        handleCancel(e) {
            wx.navigateBack({
                delta: 1 //返回的页面数，如果 delta 大于现有页面数，则返回到首页,
            });
        },
        goDetail(id) {
            wx.navigateTo({
                url: `/pages/shop/detail/main?id=${id}`
            });
        }
    },
    onShow() {
        this.searchText = '';
    }
}
</script>
<style lang="scss" scoped>
.wrap {
    position: relative;
    padding-top: 54px;
}
.header {
    position: fixed;
    width: 100%;
    top: 0px;
    left: 0px;
    z-index: 999;
}
.list {
    padding: 15px;
    li {
        display: flex;
        margin-bottom: 15px;
    }
}
.cover {
    width: 100px;
    height: 100px;
    border-radius: 4px;
}
.info {
    margin-left: 10px;
    flex: 1;
}
.name {
    color: $color-text;
    font-size: 14px;
    line-height: 24px;
}
.number {
    color: $grey-color;
    font-size: 12px;
    margin: 10px 0px;
}
.price {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 15px;
    color: $yellow-color;
}
.icon {
    font-size: 20px;
}
</style>